<template>
	
	<view class="home-container">
				<!-- 头部绿色背景和标题 -->
		<view class="header">
			<text class="header-title">在线商城</text>
		</view>
		
		<!-- 轮播图 -->
		<swiper class="banner-swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="'http://121.36.197.175:19000/test/' + item.bannerUrl" mode="aspectFill" class="banner-image" />
			</swiper-item>
		</swiper>
		
		<!-- 产品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="product in productList" :key="product.productId" @click="goToDetail(product)">
				<image :src="product.images[0].url" mode="aspectFill" class="product-image" />
				<view class="product-info">
					<text class="product-name">{{product.productName}}</text>
					<view class="product-price-row">
						<view class="price-info">
							<text class="product-price">{{product.productPrice}}元/{{product.productUnit}}</text>
							<text class="product-original-price">原价: {{product.productPrice * 1.5}}元</text>
						</view>
						<view class="cart-icon">
							<image src="/static/icons/cart.png" mode="aspectFit" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js';
	export default {
		data() {
			return {
				bannerList:[],
				productList:[],
			}
		},
		methods: {
			getBannerList(){
				request({
					url: `/product-service/product/home/banner`,
					method: 'GET',
				}).then(res => {
					// 直接赋值返回的数据到bannerList
					this.bannerList = res.data.bannerList;
					console.log('Banner数据:', this.bannerList);
				}).catch(err => {
					console.error('获取Banner失败:', err);
				})
			},
			getProductList(){
				request({
					url: `/product-service/product/home/productList`,
					method: 'GET',
				}).then(res => {
					if (res.data && res.data.productList) {
						// 创建一个Map用于存储合并后的产品数据
						const productMap = new Map();
						
						// 遍历产品列表
						res.data.productList.forEach(item => {
							const productId = item.productId;
							
							if (productMap.has(productId)) {
								// 如果Map中已存在该产品，则将图片添加到该产品的图片数组中
								const product = productMap.get(productId);
								product.images.push({
									url: 'http://121.36.197.175:19000/test/' + item.bannerUrl,
									bannerUrl: item.bannerUrl
								});
							} else {
								// 如果Map中不存在该产品，则创建新产品对象
								productMap.set(productId, {
									...item,
									images: [{
										url: 'http://121.36.197.175:19000/test/' + item.bannerUrl,
										bannerUrl: item.bannerUrl
									}]
								});
							}
						});
						
						// 将Map转换为数组
						this.productList = Array.from(productMap.values());
					}
					console.log('处理后的productList数据:', this.productList);
				}).catch(err => {
					console.error('获取productList失败:', err);
				})
			},
			goToDetail(product) {
				uni.navigateTo({
					url:  `/pages/product/detail?productId=${product.productId}`
				})
			}
		},
		created() {
			this.getBannerList();
			this.getProductList();
		}
	}
</script>

<style>
.home-container {
	padding-bottom: 20rpx;
}

.banner-swiper {
	width: 100%;
	height: 450rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.nav-section {
	display: flex;
	justify-content: space-around;
	padding: 30rpx 0;
	background-color: #f5f5f5;
	margin-top: 20rpx;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 10rpx;
}
.header {
	background-color: #6BC15F; /* 绿色背景 */
	padding: 20rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-title {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}
/* 产品列表样式 */
.product-list {
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.product-item {
	width: 48%;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

.product-image {
	width: 100%;
	height: 350rpx;
}

.product-info {
	padding: 16rpx;
}

.product-name {
	font-size: 28rpx;
	font-weight: bold;
	line-height: 1.3;
	height: 72rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 12rpx;
}

.product-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price-info {
	display: flex;
	flex-direction: column;
}

.product-price {
	color: #e64340;
	font-size: 32rpx;
	font-weight: bold;
}

.product-original-price {
	color: #999;
	font-size: 24rpx;
	text-decoration: line-through;
}

.cart-icon {
	width: 60rpx;
	height: 60rpx;
}

.cart-icon image {
	width: 100%;
	height: 100%;
}
</style>